<template>
  <div class="feedback-manage">
    <!-- 1. 操作栏：搜索 + 新增 + 批量删除 -->
    <div class="feedback-header" style="margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center;">
      <!-- 搜索表单 -->
      <el-form :inline="true" :model="searchForm" class="feedback-search">
        <el-form-item label="关键词">
          <el-input
              v-model="searchForm.keyword"
              placeholder="请输入反馈内容关键词"
              @keyup.enter="fetchFeedbacks"
              clearable
              style="width: 240px;"
          />
        </el-form-item>
        <el-form-item>
          <el-button
              type="primary"
              icon="Search"
              @click="fetchFeedbacks"
              :loading="loading"
          >
            搜索
          </el-button>
          <el-button
              icon="Refresh"
              @click="resetSearch"
              :disabled="loading"
          >
            重置
          </el-button>
        </el-form-item>
      </el-form>

      <!-- 新增反馈按钮 -->
<!--      <el-button-->
<!--          type="success"-->
<!--          icon="Plus"-->
<!--          @click="showAddDialog = true"-->
<!--          :disabled="loading"-->
<!--      >-->
<!--        新增反馈-->
<!--      </el-button>-->
    </div>

    <!-- 2. 批量删除按钮（选中数据时显示） -->
    <el-button
        v-if="selectedIds.length > 0"
        type="danger"
        icon="Delete"
        @click="handleBatchDelete"
        :disabled="loading"
        style="margin-bottom: 16px;"
    >
      批量删除（{{ selectedIds.length }}条）
    </el-button>

    <!-- 3. 反馈表格 -->
    <el-table
        :data="feedbackList"
        border
        style="width: 100%"
        :loading="loading"
        empty-text="暂无反馈数据"
        @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" /> <!-- 多选框列 -->
      <el-table-column prop="id" label="反馈编号" width="100" align="center" />
      <el-table-column prop="userId" label="用户编号" width="100" align="center" />
      <el-table-column prop="feedback" label="反馈内容" min-width="300" />
      <el-table-column
          prop="createTime"
          label="反馈时间"
          width="180"
          align="center"
          :formatter="formatDateTime"
      />
      <el-table-column label="操作" width="120" align="center">
        <template #default="scope">
          <el-button
              type="text"
              icon="Delete"
              @click="handleSingleDelete(scope.row.id)"
              :disabled="loading"
              text-color="#ff4d4f"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 4. 分页组件 -->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentPageChange"
        :current-page="pageParams.pageNum"
        :page-sizes="[10, 15, 20, 50]"
        :page-size="pageParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :disabled="loading"
        style="margin-top: 20px; text-align: right;"
    />

    <!-- 5. 新增反馈弹窗 -->
    <el-dialog
        v-model="showAddDialog"
        title="新增反馈"
        width="400px"
        :before-close="handleDialogClose"
    >
      <el-form
          ref="addFormRef"
          :model="addForm"
          :rules="addFormRules"
          label-width="80px"
          style="margin-top: 16px;"
      >
        <el-form-item label="反馈内容" prop="content">
          <el-input
              v-model="addForm.content"
              type="textarea"
              rows="4"
              placeholder="请输入反馈内容"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showAddDialog = false">取消</el-button>
        <el-button
            type="primary"
            @click="handleAddFeedback"
            :loading="addLoading"
        >
          提交
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { ElMessage, ElMessageBox, ElForm } from 'element-plus'
import http from '@/request/http'

// -------------------------- 2. 列表相关状态 --------------------------
// 搜索表单（对应后端FeedbackDTO的keyword）
const searchForm = reactive({
  keyword: ''
})

// 分页参数（对应后端FeedbackDTO的pageNum、pageSize）
const pageParams = reactive({
  pageNum: 1,
  pageSize: 10
})

// 表格数据
const feedbackList = ref([])
const total = ref(0) // 总条数（后端PageResult.total）
const loading = ref(false) // 列表加载状态
const selectedIds = ref([]) // 批量删除选中的ID数组

// -------------------------- 3. 新增反馈相关状态 --------------------------
const showAddDialog = ref(false) // 新增弹窗显示状态
const addLoading = ref(false) // 新增提交加载状态
const addFormRef = ref(null) // 新增表单引用（用于校验）

// 新增表单数据（对应后端addFeedback的content参数）
const addForm = reactive({
  content: ''
})

// 新增表单校验规则
const addFormRules = reactive({
  content: [
    { required: true, message: '请输入反馈内容', trigger: 'blur' },
    { min: 2, max: 500, message: '反馈内容长度需在2-500字之间', trigger: 'blur' }
  ]
})

// -------------------------- 4. 工具方法 --------------------------
/** 时间格式化：后端createTime（如ISO字符串）转本地时间 */
const formatDateTime = (row, column, cellValue) => {
  if (!cellValue) return '-'
  const date = new Date(cellValue)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  })
}

/** 重置搜索条件 */
const resetSearch = () => {
  searchForm.keyword = ''
  pageParams.pageNum = 1 // 重置为第一页
  fetchFeedbacks()
}

/** 关闭新增弹窗时重置表单 */
const handleDialogClose = () => {
  showAddDialog.value = false
  if (addFormRef.value) {
    addFormRef.value.resetFields() // 清空表单和校验状态
  }
  addForm.content = ''
}

// -------------------------- 5. 列表数据请求 --------------------------
/** 获取反馈列表（对接后端POST /api/feedback/getFeedback） */
const fetchFeedbacks = async () => {
  try {
    loading.value = true
    // 构造请求体：与后端FeedbackDTO字段完全匹配
    const requestBody = {
      ...pageParams, // pageNum、pageSize
      keyword: searchForm.keyword // 搜索关键词
    }
    // 发送POST请求（后端要求RequestBody传参）
    const res = await http.post('/api/feedback/getFeedback', requestBody)
    // 解析后端返回：DataVo.data是PageResult，包含list和total
    const pageResult = res.data
    feedbackList.value = pageResult.items || []
    total.value = pageResult.total || 0
  } catch (error) {
    console.error('获取反馈列表失败：', error)
    feedbackList.value = []
    total.value = 0
  } finally {
    loading.value = false
    selectedIds.value = [] // 重置选中状态
  }
}

// -------------------------- 6. 分页事件处理 --------------------------
/** 每页条数改变 */
const handleSizeChange = (val) => {
  pageParams.pageSize = val
  pageParams.pageNum = 1 // 条数改变时重置为第一页
  fetchFeedbacks()
}

/** 当前页码改变 */
const handleCurrentPageChange = (val) => {
  pageParams.pageNum = val
  fetchFeedbacks()
}

// -------------------------- 7. 选中事件处理（批量删除用） --------------------------
/** 表格多选事件：收集选中的ID */
const handleSelectionChange = (selection) => {
  selectedIds.value = selection.map(item => item.id)
}

// -------------------------- 8. 删除功能（单个 + 批量） --------------------------
/** 单个删除（对接后端DELETE /api/feedback/deleteFeedback/{id}） */
const handleSingleDelete = async (id) => {
  try {
    await ElMessageBox.confirm(
        '确定要删除这条反馈吗？此操作不可撤销！',
        '确认删除',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
        }
    )
    loading.value = true
    // 发送DELETE请求（路径参数id）
    await http.delete(`/api/feedback/deleteFeedback/${id}`)
    ElMessage.success('删除成功！')
    fetchFeedbacks() // 重新获取列表
  } catch (error) {
    // 取消删除时不提示错误
    if (error.message !== 'cancel') {
      console.error('单个删除失败：', error)
    }
  } finally {
    loading.value = false
  }
}

/** 批量删除（对接后端POST /api/feedback/deleteFeedbackList） */
const handleBatchDelete = async () => {
  try {
    await ElMessageBox.confirm(
        `确定要删除选中的${selectedIds.value.length}条反馈吗？此操作不可撤销！`,
        '批量删除确认',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
        }
    )
    loading.value = true
    // 发送POST请求（请求体是ID数组，与后端List<Long>匹配）
    await http.post('/api/feedback/deleteFeedbackList', selectedIds.value)
    ElMessage.success('批量删除成功！')
    fetchFeedbacks() // 重新获取列表
  } catch (error) {
    if (error.message !== 'cancel') {
      console.error('批量删除失败：', error)
    }
  } finally {
    loading.value = false
  }
}

// -------------------------- 9. 新增反馈功能（对接后端POST /api/feedback/addFeedback） --------------------------
/** 提交新增反馈 */
const handleAddFeedback = async () => {
  try {
    // 表单校验
    const formRef = addFormRef.value
    if (!formRef) return
    await formRef.validate()

    addLoading.value = true
    // 正确传递方式：将 content 放在 params 配置项中
    await http.post(
        '/api/feedback/addFeedback',
        {}, // 后端用 @RequestParam 时，请求体可空
        {
          params: { content: addForm.content } // 关键：参数必须包裹在 params 对象内
        }
    )
    ElMessage.success('反馈提交成功！')
    showAddDialog.value = false // 关闭弹窗
    fetchFeedbacks() // 重新获取列表
  } catch (error) {
    // 表单校验失败时不提示额外错误
    if (error.name !== 'ValidationError') {
      console.error('新增反馈失败：', error)
    }
  } finally {
    addLoading.value = false
  }
}

// -------------------------- 10. 组件挂载时初始化 --------------------------
onMounted(() => {
  fetchFeedbacks() // 页面加载时获取反馈列表
})
</script>

<style scoped>
.feedback-manage {
  padding: 20px;
  background-color: #fff;
  min-height: calc(100vh - 40px);
}

/* 表格行 hover 效果 */
::v-deep .el-table__row:hover {
  background-color: #f5f7fa !important;
}

/* 分页组件样式优化 */
::v-deep .el-pagination__total {
  margin-right: 8px;
}
</style>
